<template>
    <div class="page-header-index-wide">
        <a-card title="核心数据">
            <a-row :gutter="24" >
                <a-col :span="8" style="border-right: 1px solid #E8E8E8;">
                    <a-space direction="vertical" class="coreData">
                        <span class="spanTitle">实时在线用户量</span>
                        <span class="spanCount">10090</span>
                    </a-space>
                </a-col>
                <a-col :span="8" style="border-right: 1px solid #E8E8E8;">
                    <a-space direction="vertical" class="coreData">
                        <span class="spanTitle">当天预警推送数</span>
                        <span class="spanCount">120090</span>
                    </a-space>

                </a-col>
                <a-col :span="8">
                    <a-space direction="vertical" class="coreData">
                        <span class="spanTitle">历史预警推送数</span>
                        <span class="spanCount">110060</span>
                    </a-space>
                </a-col>
            </a-row>       
        </a-card>
        
        <a-row :gutter="24" style="margin-top:20px;">
        <a-col :span="24">
            <a-card title="用户在线统计">
            <div class="timeBox" slot="extra">
                <span class="timeItem active">今日</span>
                <span class="timeItem">本周</span>
                <span class="timeItem">本月</span>
                <a-range-picker class="timeItem" valueFormat="YYYY-MM-DD" :allowClear="true" @change="onTimeChange" />
            </div>
            <smLine style="width:85vw;height:420px;" :data="userOnlineData" :color="['#1F93FF']" splitLine />
            </a-card>
        </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top:20px;">
        <a-col :span="24">
            <a-card title="预警数量统计">
            <div class="timeBox" slot="extra">
                <span class="timeItem active">今日</span>
                <span class="timeItem">本周</span>
                <span class="timeItem">本月</span>
                <a-range-picker class="timeItem" valueFormat="YYYY-MM-DD" :allowClear="true" @change="onTimeChange" />
            </div>
            <smLine style="width:85vw;height:420px;" :data="warnindCountData" :color="['#1F93FF']" splitLine />
            </a-card>
        </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top:20px;">
        <a-col :span="24">
            <a-card title="各区域预警统计">
                <div class="timeBox" slot="extra">
                    <span class="timeItem active">今日</span>
                    <span class="timeItem">本周</span>
                    <span class="timeItem">本月</span>
                    <a-range-picker class="timeItem" valueFormat="YYYY-MM-DD" :allowClear="true" @change="onTimeChange" />
                </div>
                <CustomTable
                    ref="table"
                    :showAlert="false"
                    :columns="columns"
                    :loading="loading"
                    :dataSource="pageData"
                    :showSelection="false"
                    @change="onTableChange"
                    style="margin-top: 20px;margin-bottom: 20px;"
                >
                </CustomTable>
            </a-card>
        </a-col>
        </a-row>
    </div>
</template>
<script>
import smLine from '@/components/echarts/smLine.vue'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
    components: {
        smLine,
        CustomTable
    },
    data(){
        return {
            userOnlineData: [],
            warnindCountData: [],
            pageData: [],
            loading: false,
            columns: [
                {
                title: '序号',
                dataIndex: 'order',
                width: 90,
                align:'center',
                scopedSlots: { customRender: 'order' },
                customRender: (text, record, index) => `${(this.form.currentPage - 1) * this.form.pageSize + (index + 1)}` //序号分页后连续
                },
                {
                title: '省份',
                dataIndex: 'fzVictimTotalList',
                align:'center',
                width: 150,
                },
                {
                title: '城市',
                dataIndex: 'warningTotal',
                align: 'center',
                width: 100,
                },
                {
                title: '数据量',
                dataIndex: 'dissuadedTotal',
                align: 'center',
                width: 170,
                },
                {
                title: '最后更新时间',
                dataIndex: 'sysUserName',
                align: 'center',
                width: 180,
                }
            ],
        }
    },
    mounted(){
        this.getUserOnlineData()
        this.getWarnindCountData()
        this.refreshTable()
    },
    methods: {
        onTimeChange(date, dateString){

        },
        getUserOnlineData() {
            let data = [
                {
                date: '2021-1-1',
                count: '20'
                },
                {
                date: '2021-1-2',
                count: '100'
                },
                {
                date: '2021-1-3',
                count: '10'
                }
            ]
            let list = []
            data.map(item => {
                list.push({
                product: item.date,
                数量: item.count
                })
            })
            this.userOnlineData = list
        },
        getWarnindCountData() {
            let data = [
                {
                areaName: '海口市',
                count: '20'
                },
                {
                areaName: '三亚市',
                count: '100'
                },
                {
                areaName: '乐东县',
                count: '10'
                }
            ]
            let list = []
            data.map(item => {
                list.push({
                product: item.areaName,
                数量: item.count
                })
            })
            this.warnindCountData = list
        },
        onTableChange(pageFilter, filters, sorter) {
            this.pageFilter.pageNo = pageFilter.currentPage
            this.pageFilter.pageSize = pageFilter.pageSize
            this.refreshTable()
        },
        refreshTable(){
            //this.loading = true
            // warningPortraitPage(this.pageFilter)
            //     .then(res => {
            //     if (res.success) {
            //         this.pageData = res.result
            //     } else {
            //         this.$message.warning(res.message ? res.message : '请求失败！')
            //     }
            //     })
            //     .catch(e => {
            //     this.$message.warn('请求失败！')
            //     })
            //     .finally(() => {
            //     this.loading = false
            //     })
        }
    }
}
</script>
<style lang="less" scoped>
    /deep/ .timeBox {
    .active {
        color: #5bc6f5;
    }
    .timeItem {
        cursor: pointer;
        margin-left: 20px;
    }
    }

    .coreData {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
    }

    /deep/.ant-card .ant-card-body {
        padding: 0 24px 0 24px;
    }

    .spanCount {
        font-weight: 700;
        font-size: 28px;
        color: #333333;
    }

    .spanTitle {
        font-weight: 500;
        font-size: 16px;
        color: #333333;
    }

</style>